<template>
    <view>
        <view v-show="search.show == false">
            <locationCustom ref="locationCustom" :address_info.sync="address_info" :tap_search="()=>{search.show=true}"></locationCustom>
            <view v-if="address_info">
                <sellerList key="sellerList" ref="sellerList" :data_append.sync="data"></sellerList>
            </view>
        </view>
        <view v-show="search.show == true">
            <view class="cu-bar search bg-white padding-lr-30 flex align-center" style="height: 120rpx;">
                <view class="text-bold text-xxl" @tap="searchBack">
                    <text class="cuIcon-back_android"></text>
                </view>
                <view class="search-form round border-1-nddyny" style="height: 72rpx; margin-left: 20rpx; margin-right: 20rpx;">
                    <text class="cuIcon-search"></text>
                    <input @input="(e)=>{search.inputValue = e.target.value}" :value="search.inputValue" style="font-size: 28rpx;"
                        placeholder="搜一搜商家名、商家介绍" confirm-type="search"></input>
                </view>
                <view class="text-lg" @tap="searchSubmit">
                    <text>搜索</text>
                </view>
            </view>
            <sellerList key="searchSellerList" ref="searchSellerList" :is_search="true" :data_append.sync="data"></sellerList>
        </view>
    </view>
</template>

<script>
    import locationCustom from '../../components/nddyny/locationCustom.vue';
    import sellerList from './components/sellerList.vue';
    export default {
        components: {
            locationCustom,
            sellerList,
        },
        data() {
            let search = {
                show: false,
                inputValue: '',
                value: ''
            }
            return {
                search: this.$nddyny.object.copy(search),
                search_bak: this.$nddyny.object.copy(search),
                address_info: null,
                data: {
                    form: {
                        seller_type: this.$store.state.user.is_seller_firm == 1 ? 1 : 0,
                        area_lng: '',
                        area_lat: '',
                        city_code: ''
                    }
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.$refs.locationCustom.getSetLocationInfo();
            })
        },
        watch: {
            address_info() {
                if (!this.address_info) {
                    return;
                }
                this.data.form.area_lng = this.$nddyny.number.floor(this.address_info.area_lng, 6);
                this.data.form.area_lat = this.$nddyny.number.floor(this.address_info.area_lat, 6)
                this.data.form.city_code = (this.address_info.area_code + '').substr(0, 4) + '00';
                this.$nextTick(() => {
                    this.$refs.sellerList.getList(this.$api.list_action_force_init);
                })
            },
            'search.value'(new_value) {
                if (!new_value) {
                    return;
                }
                this.$refs.searchSellerList.getList(this.$api.list_action_force_init, new_value);
            }
        },
        methods: {
            searchBack() {
                this.$set(this, 'search', this.$nddyny.object.copy(this.search_bak));
                this.$refs.searchSellerList.initData();
            },
            searchSubmit() {
                this.search.value = this.search.inputValue;
            },
            backData(data) {
                this.$refs.locationCustom.backData(data);
            },
            listAdd() {
                let key = 'sellerList';
                if (this.search.show == true) {
                    key = 'searchSellerList';
                }
                if (this.$refs[key]) {
                    this.$nextTick(() => {
                        this.$refs[key].getList(this.$api.list_action_add);
                    })
                }
            },
        }
    }
</script>
